<template>
	<view>
		<view class="headBg flex" style="justify-content: center;">
			<view class="headBgTxt m-r-80">
				商铺出租转让服务平台
			</view>
			<image src="/static/iss.png" mode=""></image>
		</view>
		
		<view class="funList ">
			<view v-for="(item,index) in list" :key="index" class="funItem flex_b" @click="routerFn(item)">
				<view class="flex">
					<image :src="item.image" mode=""></image>
					<view class="m-l-16">
						<view class="font-36 font-weight">{{item.title}}</view>
						<view class="grey font-28">{{item.des}}</view>
					</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						image:require('../../static/iconImg/1-1.png'),
						title:'快速转店',
						des:"专业转店",
						router:"/otherpages/issueTurn/issueTurn?type=change"
					},
					{
						image:require('../../static/iconImg/1-2.png'),
						title:'快速找店',
						des:"免费找店",
						router:"/otherpages/issueTurn/issueTurn?type=look"
					},
					{
						image:require('../../static/iconImg/1-3.png'),
						title:'商铺出租',
						des:"填写您的商铺基本信息",
						router:"/otherpages/myChuZu/myChuZu?type=0"
					},
					{
						image:require('../../static/iconImg/1-4.png'),
						title:'商铺转让',
						des:"填写您商铺的基本概况",
						router:"/otherpages/myChuZu/myChuZu?type=1"
					},
					{
						image:require('../../static/iconImg/1-5.png'),
						title:'厂房仓库',
						des:"请填写您厂房仓库的基本信息",
						router:"/otherpages/muChangF/muChangF"
					},
					{
						image:require('../../static/iconImg/1-6.png'),
						title:'选址求租',
						des:"填写选址求租需求",
						router:"/otherpages/myQiuZu/myQiuZu"
					}
				]
			};
		},
		methods:{
			routerFn(item) {
				if(item.router) {
					this.$util.redirectTo(item.router)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafcff;
	}
	.funList {
		margin-top: -100rpx;
		.funItem {
			padding: 24rpx;
			margin: 24rpx auto;
			width: 642rpx;
			height: 118rpx;
			opacity: 1;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 16rpx 22rpx  rgba(0, 51, 81, 0.06);
			image {
				width: 102rpx;
				height: 102rpx;
				border-radius: 50%;
			}
		}
	}
	.headBg {
		align-items: flex-start;
		width: 750rpx;
		height: 304rpx;
		background: linear-gradient(180deg, (#fff 0%,#f1f6fe 20%, #e9f2ff 80%,#fafcff 100%));
		padding-top: 30rpx;
		.headBgTxt {
			width: 394rpx;
			height: 152rpx;
			opacity: 1;
			text-shadow: 2rpx 2rpx 0rpx  rgba(203, 208, 224, 1);
			/** 文本1 */
			font-size: 60rpx;
			font-weight: 400;
			letter-spacing: 5.45rpx;
			line-height: 76rpx;
			color: #1a69e2;
			text-align: left;
			vertical-align: top;

		}
		image {
			width: 148.32rpx;
			height: 152rpx;
		}
	}
</style>
